<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title id="title"></title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript"  src="../js/echarts.min.js"></script>
		<!-- <script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/echarts.min.js"></script> -->
		<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
	</head>
	<body>
		<div id="tabs">
		  	<!-- 导航栏部分 -->
		  	<ul class="table">
		  		<li class="tabActive">日<p></p></li>
		  		<li>周<p></p></li>
		  		<li>月<p></p></li>
		  		<li>年<p></p></li>
		  	</ul>
			<div class="chartType">
				<!-- <div>体重(kg)</div> -->
			</div>
			<div id="main"></div>
		  	<!-- 内容区域 -->
		  	<div class="content conAvtive">
				<div class="listRecord">
					<div class="listText1"></div>
					<div class="listInfor">
					</div>
				</div>	
				<div class="editData">
					<!-- <div>
						2024-01-08 12:00  
					</div>
					<div>100kg</div> -->
				</div>
			</div>
		  	<div class="content">
			</div>
		  	<div class="content">
			</div>
		  	<div class="content">
			</div>
		</div>
		<div class="bottom" onclick="goAdd()">
			<div class="submitContent" >添加记录</div>
		</div>
	</body>
	
	<script type="text/javascript">
		//解析请求地址
		function getQueryParams(url) {
			let params = {};
			let queryString = url ? url.split('?')[1] : window.location.search.slice(1);
			let arr = queryString.split('#')[0].split('&');
			for (let i = 0; i < arr.length; i++) {
				let a = arr[i].split('=');
				let paramName = a[0];
				let paramValue = typeof(a[1]) === 'undefined' ? true : decodeURIComponent(a[1].replace(/\+/g, ' '));
				
				if (params[paramName]) {
					if (Array.isArray(params[paramName])) {
						params[paramName].push(paramValue);
					} else {
						params[paramName] = [params[paramName], paramValue];
					}
				} else {
					params[paramName] = paramValue;
				}
			}
			return params;
		}
		let tabText = '';
		let name = '';
		let mbTypeId = '';
		let patientId = '';
		let editId = '';
		$(function(){
			getUrlParam();
		});
		function goAdd(){
			wx.miniProgram.navigateTo({
				url: '/ncd_package/pages/indexNew/indexNew?mbTypeId='+mbTypeId+'&patientId='+patientId+'&name='+name
			});
		}
		//去编辑页面
		$(".editData").on("click", function() {
			wx.miniProgram.navigateTo({
				url: '/ncd_package/pages/indexNew/indexNew?mbTypeId='+mbTypeId+'&patientId='+patientId+'&name='+name+'&id='+editId
			});
		})
		// 获取URL参数
		function getUrlParam() {
			let url = window.location.href;
			let params = getQueryParams(url);
			name = params['name'];
			mbTypeId = params['mbTypeId'];
			patientId = params['patientId'];
			getList(0,mbTypeId,patientId);
			getLog(mbTypeId,patientId);
			let title = '';//页面头部名称
			let chartType = '';//统计图上 名称+单位
			let infor = '';//统计图下 文字描述
			let listText1 = '';//统计图下 文字标题
			
			if(mbTypeId == 10){
				title = '体重';
				chartType = '体重（kg）';
				listText1 += '关于体重指标';
				infor += '体重数值说明<br>'+
					'体重是反应和衡量一个人健康状况的重要标志之一。过胖和过瘦都不利于健康。<br>'+
					'身体质量指数(BMI指数)是国际上衡量人体胖瘦程度以及是否健康的一个常用指标，计算公式为:BMI=体重(千克):身高(米)²<br>'+
					'体重过低:BMI<18.5;<br>'+
					'体重正常:18.5≤BMI<24.0;<br>'+
					'超重:24≤BMI<28.0;<br>'+
					'肥胖:BMI>28.0;'
			}
			if(mbTypeId == 3){
				title = '糖化血红蛋白';
				chartType = '糖化血红蛋白（%）';
				listText1 += '关于糖化血红蛋白指标'
				infor += '糖化血红蛋白指标主要用于评估过去8~12周(2-3个月)内的平均血糖水平，是糖尿病诊断、治疗以及长期血糖控制情况评估的重要指标。 <br>'+
						'＜4.0%为偏低，提示糖化血红蛋白偏低，一般见于频发低血糖或者各种原因引起的贫血等；<br>'+
						'＞6.0%为偏高，提示血糖偏高（≥6.5%提示可能患有糖尿病）；<br>'+
						'≥9%，对于糖尿病患者属于启动胰岛素治疗的指征。'
			}
			if(mbTypeId == 4){
				title = '甘油三酯';
				chartType = '甘油三酯（mmol/L）';
				listText1 += '关于甘油三酯指标'
				infor += '甘油三酯指标对于评估个体的血脂状况具有重要意义，因为甘油三酯增高与冠心病、原发性高脂血症、动脉粥样硬化症等多种疾病密切相关。因此，保持甘油三酯在正常范围内对于维护心血管健康至关重要。<br>'+
						'请注意，具体数值可能因检测方法、实验室条件等因素略有不同，建议结合个人检测报告和医生建议进行综合评估。<br>'+
						'1.70-2.25 mmol/L为边缘升高，提示存在健康风险，需要考虑偏高因素，调整饮食及生活方式等；<br>'+
						'≥2.26mmol/L为升高，提示存在心脑血管等疾病风险，需要在专业医生的指导下及时干预治疗。'		
			}
			if(mbTypeId == 5){
				title = '总胆固醇';
				chartType = '总胆固醇（mmol/L）';
				listText1 += '关于总胆固醇指标'
				infor += '总胆固醇是指血液中所有脂蛋白所含胆固醇之总和。是脂肪在血液中存在的一种形式。胆固醇在体内有许多重要功能。'		
			}
			if(mbTypeId == 6){
				title = '高密度脂蛋白胆固醇';
				chartType = '高密度脂蛋白胆固醇（mmol/L）';
				listText1 += '关于高密度脂蛋白胆固醇指标'
				infor += '高密度脂蛋白是血液中密度最高、颗粒最小的的脂蛋白，高密度脂蛋白负责把斑块内的胆固醇运输至肝脏进行分解代谢，即胆固醇逆转运，减少胆固醇在血管壁的沉积，起到抗动脉硬化作用。'		
			}
			if(mbTypeId == 7){
				title = '低密度脂蛋白胆固醇';
				chartType = '低密度脂蛋白胆固醇（mmol/L）';
				listText1 += '关于低密度脂蛋白胆固醇指标'
				infor += 'LDL - C 水平是防治 ASCVD 的重要策略之一，也是血脂异常防治的首要目标。<br>'+
						'理想水平 < 2.6 mmol/L；<br>'+
						'合适水平 < 3.4 mmol/L；<br>'+
						'边缘水平 ≥ 3.4 且 < 4.1 mmol/L ；<br>'+
						'属于升高 ≥ 4.1 mmol/L。'		
			}
			if(mbTypeId == 8){
				title = '血糖';
				chartType = '血糖（mmol/L）';
				listText1 += '关于血糖指标'
				infor += '血糖数值说明<br>'+
						'空腹血糖:至少8小时没有进食热量所测的血糖；'+
						'正常范围是3.9-6.1mmol/L，空腹血糖<3.9mmol/L血糖偏低；<br>'+
						'空腹血糖在6.1-7.0mmol/L为空腹血糖受损；<br>'+
						'空腹血糖27.0mmol/L为疑似糖尿病；<br>'+
						'餐后血糖:一般指早中晚三餐进食后2小时所测定的血糖；<br>'+
						'正常范围是3.9-7.8mmol/L；<br>'+
						'餐后血糖在7.8-11.1mmol/L为糖耐量异常；<br>'+
						'餐后血糖>11.1mmo/L疑似糖尿病；<br>'+
						'随机血糖:随机血糖指不考虑上次用餐时间，一天中任意时间的血糖。<br>'+
						'正常范围是3.9-11.1mmo//L，>11.1mmol/L血糖偏高，<3.9mmol/L血糖偏低；<br>	'+
						'睡前血糖:晚餐后、入睡前的血糖；<br>'+
						'正常范围是3.9-6.1mmol/L；<br>'+
						'≥6.1mmol/L血糖偏高；<br>'+
						'3.9mmol/L血糖偏低。'		
			}
			if(mbTypeId == 9 || mbTypeId == '9'){
				
				title = '血压';
				chartType = '血压（mmHg）';
				listText1 += '关于血压指标'
				infor += '血压指血管内的血液对于单位面积血管壁的侧压力，即压强。通常所说的血压是指动脉血压。当血管扩张时，'+
						'血压下降；血管收缩时，血压升高。<br>'+
						'1、收缩压参考区间应为90-139mmHg。<br>'+
						'2、舒张压参考区间应为60-89mmHg。<br>'+
						'理想血压：收缩压>120mmHg/舒张压>80mmHg。<br>'+
						'正常血压：收缩压应>130mmHg/舒张压>85mmHg。<br>'+
						'血压正常高限或高血压前期：收缩压在130~139mmHg/舒张压在85～89mmHg。<br>'+
						'临界高血压：收缩压在140～160mmHg/舒张压在90～95mmHg。<br>'+
						'高血压：收缩压≥140mmHg/舒张压≥90mmHg。<br>'+
						'低血压：收缩压≤90mmHg/舒张压≤60mmHg。'		
			}
			$(".chartType").append(chartType);
			$(".listInfor").append(infor);
			$(".listText1").append(listText1)
			$("#title").append(title)
		}
		$(".table li").on("click", function() {
			var divs = $(".content")
			var lis = $(".table li")
			lis.removeClass('tabActive')
			$(this).addClass('tabActive')
			for (var i = 0; i < lis.length; i ++) {
				if (lis[i] == this) {
					divs.removeClass('conAvtive')
					divs.eq(i).addClass('conAvtive')
				}
			}
			tabText = $(".table li.tabActive").text()
			if(tabText != '日'){
				getAvg($(this).index(),mbTypeId,patientId);
				getList($(this).index(),mbTypeId,patientId);
				$('.conAvtive').empty();
				$('.bottom').hide();
			}else{
				getList(0,mbTypeId,patientId);
				$('.bottom').show();
			}
		})
		//获取平均值数据
		function getAvg(type,mbTypeId,patientId){
			let ulHtml = '';
			$.ajax({
				url: 'https://weixinprod.api.dyzh120.com/api/v1/mbData/queryJzDataByType',
				contentType: 'application/json; charset=utf-8',
				type:'post',
				data:JSON.stringify({ type:type,mbTypeId:mbTypeId,patientId:patientId}),
				success: function(response) {
					var result = response.result					
					ulHtml += '<div class="listRecord">'+
							'<div class="listInfordiv">'+
								'<div class="listText">'+$(".table li.tabActive").text()+'度记录</div>'+
							'</div>'+
							'<div class="listNum">'+
								'<div class="listTime">最小</div>'+
								'<div class="listB"><b class="listNumL">'+result.min+'</b>'+result.danwei+'</div>'+
							'</div>'+
							'<div class="line"></div>'+
							'<div class="listNum">'+
								'<div class="listTime">最大</div>'+
								'<div class="listB"><b class="listNumL">'+result.max+'</b>'+result.danwei+'</div>'+
							'</div>'+
							'<div class="line"></div>'+
							'<div class="listNum">'+
								'<div class="listTime">平均</div>'+
								'<div class="listB"><b class="listNumL">'+result.avg+'</b>'+result.danwei+'</div>'+
							'</div>'+
						'</div>'
					$(".conAvtive").append(ulHtml);
				}
			})
		}
		//最近一次添加的记录返回
		function getLog(mbTypeId,patientId){
			let ulHtml = '';
			$.ajax({
				url: 'https://weixinprod.api.dyzh120.com/api/v1/mbData/queryLog',
				contentType: 'application/json; charset=utf-8',
				type:'post',
				data:JSON.stringify({mbTypeId:mbTypeId,patientId:patientId}),
				success: function(response) {
					var result = response.result[0]
					if(response.result.length == 0){
						$(".editData").hide();
					}else{
						if(result.mbTypeId == 10){
							ulHtml += '<div>'+result.measureTime+'</div>'+
									'<div><b>'+ result.weight +'</b> kg</div>'
						}
						if(result.mbTypeId == 3){
							ulHtml += '<div>'+result.measureTime+'</div>'+
									'<div><b>'+ result.hba1c +'</b> %</div>'
						}
						if(result.mbTypeId == 4){
							ulHtml += '<div>'+result.measureTime+'</div>'+
									'<div><b>'+ result.tg +'</b> mmol/L</div>'
						}
						if(result.mbTypeId == 5){
							ulHtml += '<div>'+result.measureTime+'</div>'+
									'<div><b>'+ result.tc +'</b> mmol/L</div>'
						}
						if(result.mbTypeId == 6){
							ulHtml += '<div>'+result.measureTime+'</div>'+
									'<div><b>'+ result.hdlC +'</b> mmol/L</div>'
						}
						if(result.mbTypeId == 7){
							ulHtml += '<div>'+result.measureTime+'</div>'+
									'<div><b>'+ result.ldlC +'</b> mmol/L</div>'	
						}
						if(result.mbTypeId == 8){
							ulHtml += '<div>'+result.measureTime+'</div>'+
									'<div><b>'+ result.mmol +'</b> mmol/L</div>'		
						}
						if(result.mbTypeId == 9){
							ulHtml += '<div>'+result.measureTime+'</div>'+
									'<div><b>'+ result.ssy+' / '+result.szy +'</b> mmHg</div>'		
						}
						$(".editData").append(ulHtml);
						if(result.id){
							editId = result.id
						}
					}
				}
			})
		}
		function getList(type,mbTypeId,patientId){
		    $.ajax({
				url: 'https://weixinprod.api.dyzh120.com/api/v1/mbData/queryTjByType',
				contentType: 'application/json; charset=utf-8',
				type:'post',
				data:JSON.stringify({ type:type,mbTypeId:mbTypeId,patientId:patientId}),
				success: function(response) {
					let resData = response.result.data.map(parseFloat);
					let item = {}
					let newData = []
					let restime = []
					let newSeries = []
					let newTooltip = {}
					if(response.result.time.length == 0){
						restime = response.result.categories
					}else{
						if(type === 0){
							restime = response.result.time
							$.each(restime, function(index, value) {
								restime[index] = value.substring(10, 16); // 使用substring截取字符串
							});
							
						}else{
							restime = response.result.categories
						}
					}
					
					if(mbTypeId == 9 || mbTypeId == '9'){
						newTooltip = {
							show: true,
							//trigger: 'axis',
							formatter: function(params) {
								if(params.value > 139){
									return `<div class="tool" style="background: #FC2249"><p>${params.name}  <strong style="font-size:16px">${params.value}</strong> mmhg</p></div>`;
								}else{
									return `<div class="tool" style="background: #07C160"><p>${params.name}  <strong style="font-size:16px">${params.value}</strong> mmhg</p></div>`;
								}
							},
							renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
							backgroundColor:'none', // 提示框浮层的背景颜色。
							borderColor: 'none', // 提示框浮层的边框颜色。
							borderWidth: 0, // 提示框浮层的边框宽。
							padding:0, // 提示框浮层内边距，
							showDelay: 0,
							enterable: false,
							renderMode: 'html',
							textStyle: {
								fontSize:16  // 设置提示框内字体大小
							}
						}
						newSeries = [
							{
								name: '收缩压',
								type: 'line',
								data:response.result.data,
								symbol: 'circle', // 设置圆点为实心
								symbolSize:14,// 点的大小
								smooth: true,
								itemStyle: {
									normal: {
										color: '#1971ff' // 设置为红色
									}
								},
								lineStyle: {
									color: '#1971ff', // 折线颜色
									width: 2, // 折线宽度
								},
								label: {
									show: true,
									position: 'top'
								}
							},
							{
								name: '舒张压',
								type: 'line',
								data:response.result.dataSzy,
								symbol: 'circle', // 设置圆点为实心
								symbolSize:10,// 点的大小
								smooth: true,
								connectNulls: false,
								itemStyle:{
									normal: {
										color: '#07C160' // 设置为红色
									}
								},
								lineStyle: {
									color: '#07C160', // 折线颜色
									width: 2, // 折线宽度
								},
								label: {
									show: true,
									position: 'top'
								}
							}
						]
					}else{
						resData.forEach(function(val, index) {
							if(val > response.result.biaozhun){
								item = {value: val,date:response.result.date,time:restime[index],daiwei:response.result.danwei,itemStyle: {color: '#FC2249 '}}
							}else{                 
								item = {value: val,date:response.result.date,time:restime[index],daiwei:response.result.danwei,itemStyle: {color: '#07C160'}}
							}
							newData.push(item)
						});
						newSeries = [{
						    data:newData,
						    type: 'line',
							symbol: 'circle', // 设置圆点为实心
							smooth: true,
							connectNulls: false,
						    symbolSize:10,// 点的大小
							roam:false,
							label: {
								show: true,
								position: 'top'
							}
						}]
						newTooltip = {
							show: true,
							trigger: 'item',
							formatter: function(params) {
								if(params.value > response.result.biaozhun){
									return `<div class="tool" style="background: #FC2249"><p>${params.data.time}  <strong style="font-size:16px">${params.value}</strong> ${params.data.daiwei}</p></div>`;
								}else{
									return `<div class="tool" style="background: #07C160"><p>${params.data.time}  <strong style="font-size:16px">${params.value}</strong> ${params.data.daiwei}</p></div>`;
								}
								
							},
							renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
							backgroundColor:'none', // 提示框浮层的背景颜色。
							borderColor: 'none', // 提示框浮层的边框颜色。
							borderWidth: 0, // 提示框浮层的边框宽。
							padding:0, // 提示框浮层内边距，
							showDelay: 0,
							enterable: false,
							renderMode: 'html',
							textStyle: {
								fontSize:16  // 设置提示框内字体大小
							}
						}
					}
					var myChart = echarts.init(document.getElementById('main'));
					 
					// 指定图表的配置项和数据
					var option = {
						grid: {
							left: '1%',    // 图表左侧与容器边缘的间距为容器宽度的3%
							right: '5%',   // 图表右侧与容器边缘的间距为容器宽度的4%
							top: '8%',    // 图表顶部与容器边缘的间距为容器高度的10%
							bottom: '5%', // 图表底部与容器边缘的间距为容器高度的10%
							containLabel: true // 是否包含坐标轴的刻度标签
						},
					    xAxis: {
					        type:'category',
							boundaryGap: false,
					        data: restime,
							axisLabel: {
								alignWithLabel: true,
								textStyle: {
									fontSize:14  // 设置X轴标签字体大小
								}
							}
					    },
					    yAxis: {
					        type: 'value',
							min:0,
							max:response.result.max,
							axisLabel: {
								textStyle: {
									fontSize:14  // 设置X轴标签字体大小
								}
							},
							splitLine: {
								show: false // 关闭背景线
							}
					    },
						tooltip:newTooltip,
					    series: newSeries
					};
					 
					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option)
		      },
		      error: function(xhr, status, error) {
		        // 处理错误
		      }
		    });
		};
	</script>
<style>
	*{margin:0;padding:0;}
	body{
		background-color: #F7F8FA;
		font-family:PingFang, Arial,'Microsoft YaHei', '微软雅黑';
	}
	.table {
		width:100%;
		height:48px;
		display: flex;
		background: #fff;
		position: fixed;
		left: 0;
		top: 0;
		z-index:999;
	}
	.table li {
		width: 25%;
		text-align: center;
		list-style: none;
		cursor: pointer;
		font-weight:bold;
		font-size:14px;
		color:#19191A;
		line-height:48px;
		float: left;
		text-align:center;
	}
	.table li.tabActive {
		color: #1971ff;
	}
	.tabActive p{
		width:28px;
		height:2px;
		background:#1971ff;
		margin:-2px auto 0;
	}
	.chartType{
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		align-items: center;
		font-weight: 600;
		font-size:16px;
		color: #19191A;
		line-height:40px;
		margin:60px 10px 0 10px;
	}
	#main{
		width:calc(100% - 20px);
		height:280px;
		background:#fff;
		border-radius:5px;
		margin: 0 10px;
	}
	/* 图表下面 */
	.content {
		display: none;
		margin-bottom:200px;
	}
	.conAvtive {
		width:calc(100% - 20px);
		margin:10px;
		display: block;
		margin-bottom:100px;
	}
	.content .listRecord:nth-child(2){
		display: none;
	}
	.listRecord{
		width:calc(100% - 20px);
		background: #FFF;
		border-radius:5px;
		padding:10px;
	}
	.listInfor{
		width:100%;
		font-size:16px;
		line-height:32px;
		word-break: break-all;
		white-space: normal;
	}
	.editData{
		width: calc(100% - 20px);
		border-radius:5px;
		padding:5px 10px;
		font-family: PingFang SC, PingFang SC;
		font-size:14px;
		color: #19191A;
		line-height:24px;
		background:#fff;
		display: flex;
		justify-content: space-between;
		margin-top:10px;
		font-weight: 500;
	}
	
	/* 图表下面的描述 */
	.listText1 {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-family: PingFang SC, PingFang SC;
		font-weight:1000;
		font-size:16px;
		color: #19191A;
		margin-bottom:5px;
	}
	.listInforView{display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
	.listText {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-family: PingFang SC, PingFang SC;
		font-weight:1000;
		font-size:16px;
		color: #19191A;
		height:40px;
		line-height:40px;
	}
	/* 年度记录 */
	.listNum{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.line{
		width:100%;
		height:1px;
		margin:5px 0;
		background-color: #E3E4E6;
	}
	.listTime{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size:14px;
		color: #000000;
		height:40px;
	}
	.listNumL{
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size:16px;
		color: #000000;
		line-height:45px;
		height:40px;
		margin-right:5px
	}
	.listB{
		display: flex;
		font-size:14px;
		color: #000000;
		line-height:50px;
		height:40px;
	}
	/* 图标提示 */
	.tool{
		padding:10px 15px;
		border-radius:5px;
	}
	.tool p{
		line-height:22px;
	}
	.bottom{
		width:100%;
		position: fixed;
		left: 0;
		bottom:0;
		right: 0;
		padding-bottom:10px;
		z-index:9999;
		background-color: #FFF;
	}
	.submitContent {
		background-color: #1971FF;
		display: flex;
		height:40px;
		width:calc(100% - 60px);
		font-size:14px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 40px;
		justify-content: center;
		align-items: center;
		border-radius:5px;
		text-align: center;
		margin:10px auto;
	}
	</style>
</html>